import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/painting.dart';

/**
 * DecoratedBox可以在其子组件绘制前(或后)绘制一些装饰（Decoration），如背景、边框、渐变
 */
class DecoratedBoxWidget extends StatelessWidget {
  DecoratedBoxWidget({
    Key ?key,
    @required this.text,
  }) : super(key: key);

  final String ?text;

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
        title: Text(text??""),
      ),
      body: Container(
        padding: EdgeInsets.only(top: 15),
        alignment: Alignment.center,
        child: Column(
          children: <Widget>[
            DecoratedBox(
                decoration: BoxDecoration(
                    // Color color, //颜色
                    // DecorationImage image,//图片
                    // BoxBorder border, //边框
                    // BorderRadiusGeometry borderRadius, //圆角
                    // List<BoxShadow> boxShadow, //阴影,可以指定多个
                    // Gradient gradient, //渐变
                    // BlendMode backgroundBlendMode, //背景混合模式
                    // BoxShape shape = BoxShape.rectangle, //形状
                    gradient: LinearGradient(
                        colors: [Colors.red, Colors.orange.shade700]), //背景渐变
                    borderRadius: BorderRadius.circular(3.0),
                    boxShadow: [
                      BoxShadow(
                          color: Colors.black54,
                          offset: Offset(2.0, 2.0),
                          blurRadius: 4.0)
                    ]),
                child: Padding(
                  padding:
                      EdgeInsets.symmetric(horizontal: 80.0, vertical: 18.0),
                  child: Text("login"),
                )),
            SizedBox(
              height: 30,
            ),
            DecoratedBox(
                decoration: BoxDecoration(
                  shape: BoxShape.rectangle,
                  color: Colors.orange,
                  borderRadius: BorderRadius.circular(3.0),
                ),
                child: Padding(
                  padding:
                      EdgeInsets.symmetric(horizontal: 80.0, vertical: 18.0),
                  child: Text("login[矩形]"),
                )),
            SizedBox(
              height: 30,
            ),
            DecoratedBox(
                decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  color: Colors.cyan,
                  // borderRadius: BorderRadius.circular(3.0),
                ),
                child: Padding(
                  padding:
                      EdgeInsets.symmetric(horizontal: 30.0, vertical: 30.0),
                  child: Text("login[圆形]"),
                )),
            SizedBox(
              height: 30,
            ),
            DecoratedBox(
                decoration: BoxDecoration(
                    shape: BoxShape.rectangle,
                    color: Colors.deepOrange,
                    border: Border.all(color: Colors.black)
                    // borderRadius: BorderRadius.circular(3.0),
                    ),
                child: Padding(
                  padding:
                      EdgeInsets.symmetric(horizontal: 30.0, vertical: 30.0),
                  child: Text("login[描边]"),
                )),
            SizedBox(
              height: 80,
            ),
            Container(
              color: Colors.black,
              child: new Transform(
                alignment: Alignment.topRight, //相对于坐标系原点的对齐方式
                transform: new Matrix4.skewY(0.6), //沿Y轴倾斜0.3弧度
                child: new Container(
                  padding: const EdgeInsets.all(8.0),
                  color: Colors.deepOrange,
                  child: const Text('Transform!'),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}
